<template>
  <div>
    <a-tabs type="card" plain>
      {/*第一页 */}
      <a-tab-pane key="1" tab="劳务人员">
        <div class="demo-page-header">
          <a-page-header :ghost="false" title="劳务人员列表">
            <template #extra>
              <a-button text @click="open">退场</a-button>
              <a-button key="4">取消退场</a-button>
              <a-button key="3">导入</a-button>
              <a-button key="2">导出</a-button>
              <a-button
                key="1"
                type="primary"
                plain
                class="sp2"
                @click="changeadd"
                >新增</a-button
              >
            </template>
          </a-page-header>
          <span class="sp"> 搜索：</span>
          <el-input v-model="find.name" placeholder="请输入人员姓名"></el-input>
          当前工种：
          <el-select
            v-model="find.worker"
            class="m-2"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list1"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          所在项目：
          <el-select
            v-model="find.item"
            class="m-2"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list2"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          所在承建商：
          <el-select
            v-model="find.contractor"
            class="m-2"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list3"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          所在班组：
          <el-select
            v-model="find.teams"
            class="m-2"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list4"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <br />
          <span class="sp"> 状态：</span>
          <el-select
            v-model="find.state"
            class="m-2"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list5"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-button class="sp1" @click="getList">搜索</el-button>
          <el-table
            :data="perList.slice((page - 1) * limit, limit * page)"
            style="width: 100%"
          >
            <el-table-column type="selection" width="35" />
            <el-table-column fixed prop="name" label="人员姓名" width="80" />
            <el-table-column
              prop="idNumber"
              label="证件号"
              width="150"
              header-align="center"
              align="center"
            />
            <el-table-column prop="sex" label="性别" width="60" />
            <el-table-column prop="phone" label="联系电话" width="110" />
            <el-table-column prop="workerType" label="工人类型" width="80" />
            <el-table-column prop="worker" label="当前工种" width="100" />
            <el-table-column prop="item" label="所在项目" width="100" />
            <el-table-column prop="contractor" label="所在承建商" width="100" />
            <el-table-column prop="teams" label="所在班组" width="80" />
            <el-table-column prop="state" label="状态" width="70" />
            <el-table-column label="操作" header-align="center" align="center">
              <template #default="scope">
                <el-button
                  size="small"
                  type="danger"
                  class="sp2"
                  @click="chengeperson(scope.row.id)"
                  >编辑</el-button
                >
                <el-popconfirm
                  title="亲，您真的要删除吗?"
                  @confirm="deleteflow(scope.row.id)"
                >
                  <template #reference>
                    <el-button class="del">删除</el-button>
                  </template>
                </el-popconfirm>
                <el-button size="small" @click="look(scope.row.name)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[4, 5, 6]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <Loo v-show="isShow1" @xx="changexx" :name="findname"></Loo>
        <Con
          v-show="isShow"
          teleport="body"
          @xxx="changeff"
          @bbb="shuaxin"
        ></Con>
        <ChangePerson
          :id="editid"
          v-show="isShow5"
          @shuaxin="baocunshuju"
          @ddd="changeper"
        ></ChangePerson>
      </a-tab-pane>
      {/*第二页 */}
      <a-tab-pane key="2" tab="项目部人员" force-render
        ><div class="demo-page-header">
          <a-page-header :ghost="false" title="项目部人员列表">
            <template #extra>
              <a-button key="3">导入</a-button>
              <a-button key="2">导出</a-button>
              <a-button key="1" type="primary" plain class="sp2">新增</a-button>
            </template>
          </a-page-header>
          <span class="sp"> 搜索：</span>
          <el-input
            placeholder="请输入人员姓名"
            v-model="finds.name"
          ></el-input>
          所在项目：
          <el-select
            v-model="finds.item"
            class="m-2"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list6"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          状态：
          <el-select
            v-model="finds.iswork"
            class="m-2"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list7"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-button class="sp1" @click="getList1">搜索</el-button>
          <el-table
            :data="perList1.slice((page - 1) * limit, limit * page)"
            style="width: 100%"
          >
            <el-table-column fixed type="index" label="序号" width="80" />
            <el-table-column prop="name" label="人员姓名" width="100" />
            <el-table-column prop="idNumber" label="证件号" width="180" />
            <el-table-column prop="sex" label="性别" width="80" />
            <el-table-column prop="phone" label="联系电话" width="130" />
            <el-table-column
              prop="professionalType"
              label="专业类别"
              width="80"
            />
            <el-table-column prop="gangwei" label="岗位" width="120" />
            <el-table-column prop="item" label="所在项目" width="120" />

            <el-table-column prop="iswork" label="状态" width="60" />
            <el-table-column label="操作" header-align="center" align="center">
              <template #default="scope">
                <el-button size="small" type="danger" class="sp2"
                  >编辑</el-button
                >
                <el-popconfirm
                  title="亲，您真的要删除吗?"
                  @confirm="deleteflow(scope.row.id)"
                >
                  <template #reference>
                    <el-button class="del">删除</el-button>
                  </template>
                </el-popconfirm>
                <el-button size="small" @click="look(scope.row.name)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[4, 5, 6]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <Loo v-show="isShow1" @xx="changexx" :name="findname"></Loo>
      </a-tab-pane>
      {/*第三页 */}
      <a-tab-pane key="3" tab="承建商管理人员"
        ><div class="demo-page-header">
          <a-page-header :ghost="false" title="承建商管理人员列表">
            <template #extra>
              <a-button key="3">导入</a-button>
              <a-button key="2">导出</a-button>
              <a-button key="1" type="primary" plain class="sp2">新增</a-button>
            </template>
          </a-page-header>
          <span class="sp"> 搜索：</span>
          <el-input
            class="s-1"
            v-model="findss.name"
            placeholder="请输入人员姓名"
          ></el-input>
          岗位类型：
          <el-select
            v-model="findss.gangwei"
            clearable
            class="m-4"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list9"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          所在项目：
          <el-select
            v-model="findss.item"
            clearable
            class="m-4"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list10"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          所在承建商：
          <el-select
            v-model="findss.contractor"
            clearable
            class="m-2"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list8"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          状态：
          <el-select
            v-model="findss.iswork"
            clearable
            class="m-4"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list11"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-button class="sp1" @click="getList2">搜索</el-button>
          <el-table :data="perList2" style="width: 100%" highlight-current-row>
            <el-table-column fixed type="index" label="序号" width="60" />
            <el-table-column prop="name" label="人员姓名" width="80" />
            <el-table-column prop="idNumber" label="证件号" width="160" />
            <el-table-column prop="sex" label="性别" width="80" />
            <el-table-column prop="phone" label="联系电话" width="120" />
            <el-table-column
              prop="professionalType"
              label="专业类别"
              width="80"
            />
            <el-table-column prop="gangwei" label="岗位" width="100" />
            <el-table-column prop="item" label="所在项目" width="100" />
            <el-table-column prop="contractor" label="所在承建商" width="110" />

            <el-table-column prop="iswork" label="状态" width="60" />
            <el-table-column label="操作" header-align="center" align="center">
              <template #default="scope">
                <el-button size="small" type="danger" class="sp2"
                  >编辑</el-button
                >
                <el-popconfirm
                  title="亲，您真的要删除吗?"
                  @confirm="deleteflow(scope.row.id)"
                >
                  <template #reference>
                    <el-button class="del">删除</el-button>
                  </template>
                </el-popconfirm>
                <el-button size="small" @click="look(scope.row.name)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination layout="prev, pager, next" :total="100" /></div
      ></a-tab-pane>
      <Loo v-show="isShow1" @xx="changexx" :name="findname"></Loo>
    </a-tabs>
  </div>
</template>
<script setup lang='ts'>
import { reactive, ref } from "vue";
import service from "../../../utils/service";
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/dist/index.css";
import Con from "./addconcent.vue";
import Loo from "./lookxx.vue";
import ChangePerson from "./changeperson.vue";
const open = () => {
  ElMessageBox.confirm("确定要退场该劳务人员么？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "退场成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
};
const page = ref(1); //页数
const limit = ref(4); //每页数量
const total = ref(0); //总数
interface personList {
  id: string;
  name: string;
  idNumber: string;
  sex: string;
  phone: string;
  workerType: string;
  worker: string;
  item: string;
  contractor: string;
  teams: string;
  state: string;
  professionalType: string;
  gangwei: string;
  iswork: string;
}
//插入组件显示和隐藏

const isShow = ref(false);
const isShow1 = ref(false);
const isShow5 = ref(false);
const changeadd = () => {
  isShow.value = true;
};
const changeff = () => {
  isShow.value = false;
};
const findname = ref("");
const look = (name: string) => {
  isShow1.value = true;
  findname.value = name;
};
const changexx = () => {
  isShow1.value = false;
};
const editid = ref("");
const chengeperson = (id: string) => {
  editid.value = id;
  isShow5.value = true;
};
const changeper = () => {
  isShow5.value = false;
};

//获取数据
const perList = reactive<personList[]>([]);

//删除
const deleteflow = (id: string) => {
  console.log(id);
  service({
    url: "flower/" + id,
    method: "delete",
  }).then((res) => {
    ElMessage({
      message: "删除成功！",
      type: "success",
    });
    getList();
  });
};
//筛选第一页
const list1 = reactive(["砌筑工", "钢筋工", "架子工", "混凝土工"]);
const list2 = reactive(["XXX项目1", "XXX项目2"]);
const list3 = reactive(["中建八局"]);
const list4 = reactive(["中建八局水泥一队", "_"]);
const list5 = reactive(["未进场", "在场", "已退场"]);
const find = reactive<{
  name?: string;
  worker?: string;
  item?: string;
  contractor?: string;
  teams?: string;
  state?: string;
}>({});

const getList = () => {
  service({
    url: "flower",
    method: "get",
    params: find,
  }).then((res) => {
    perList.length = 0;
    perList.push(...res.data);
    find.name = null;
    find.worker = null;
    find.item = null;
    find.contractor = null;
    find.teams = null;
    find.state = null;
    total.value = res.data.length; //获取总数
  });
};
getList();
const handleSizeChange = (val: any) => {
  //获取每一页数量
  limit.value = val;
};
const handleCurrentChange = (val: any) => {
  //换页
  page.value = val;
};
getList();
const shuaxin = () => {
  getList();
};
const baocunshuju = () => {
  getList();
};
//筛选第二页
const perList1 = reactive<personList[]>([]);
const list6 = reactive(["XXX项目1", "XXX项目2"]);
const list7 = reactive(["在职", "休假"]);
const finds = reactive<{
  name?: string;
  item?: string;
  iswork?: string;
}>({});
const getList1 = () => {
  service({
    url: "flower",
    method: "get",
    params: finds,
  }).then((res) => {
    perList1.length = 0;
    perList1.push(...res.data);
    finds.name = null;
    finds.iswork = null;
    finds.item = null;
  });
};
getList1();
//筛选第三页
const perList2 = reactive<personList[]>([]);
const list8 = reactive(["中建八局"]);
const list9 = reactive(["安全员", "标准员", "材料员", "施工员", "质量员"]);
const list10 = reactive(["XXX项目1", "XXX项目2", "XXX项目3"]);
const list11 = reactive(["在职", "休假", "离职"]);
const findss = reactive<{
  name?: string;
  item?: string;
  iswork?: string;
  contractor?: string;
  gangwei?: string;
}>({});
const getList2 = () => {
  service({
    url: "flower",
    method: "get",
    params: findss,
  }).then((res) => {
    perList2.length = 0;
    perList2.push(...res.data);
    findss.name = null;
    findss.iswork = null;
    findss.item = null;
    findss.contractor = null;
    findss.gangwei = null;
  });
};
getList2();
</script>

<style scoped>
.demo-page-header :deep(tr:last-child td) {
  padding-bottom: 0;
}

.el-input {
  width: 200px;
  margin-right: 20px;
}

.el-select {
  width: 120px;
  margin-right: 20px;
}
.sp {
  margin-left: 20px;
}
.sp1 {
  background-color: rgba(26, 188, 156, 1);
  color: white;
  border: none;
}
.sp2 {
  background-color: rgb(249, 138, 97);
  color: white;
  border: none;
}
.el-input {
  height: 30px;
}

.m-4 {
  width: 110px;
}
.s-1 {
  width: 200px;
}
.el-pagination {
  float: right;
}
</style>
